<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css 布局</title>
  <style>
    #panel, .flip {
      font-size: 16px;
      padding: 10px;
      text-align: center;
      background-color: #4caf50;
      color: white;
      border: solid 1px #a6d8a8;
      margin: auto;
    }

    #panel {
      display: none;
    }

    * {
      box-sizing: border-box;
    }

    .box {
      float: left;
      width: 33.33%;
      padding: 50px;
    }

    .clearfix::after {
      content: "";
      clear: both;
      display: table;
    }
    body{
      margin: 0;
    }
    .header{
      background-color: #2196F3;
      color: white;
      text-align: center;
      padding: 15px;
    }
    .footer{
      background-color: #444;
      color: white;
      padding: 15px;
    }
    .topMenu{
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #777;
    }
    .topMenu li{
      float: left;
    }
    .topMenu li a{
      display: inline-block;
      color: white;
      text-align: center;
      padding: 16px;
      text-decoration: none;
    }
    .topMenu li a:hover{
      background-color: #222;
    }
    .topMenu li a.active{
      color: white;
      background-color: #4CAF50;
    }
    .column{
      float: left;
      padding: 15px;
    }
    .clearfix::after{
      content: "";
      clear: both;
      display: table;
    }
    .sideMenu{
      width: 25%;
    }
    .content{
      width: 75%;
    }
    .sideMenu ul{
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    .sideMenu li a {
      margin-bottom: 4px;
      display: block;
      padding: 8px;
      background-color: #eee;
      text-decoration: none;
      color: #666;
    }
    .sideMenu li a:hover{
      background-color: #555;
      color: white;
    }
    .sideMenu li a.active{
      background-color: #008cba;
      color: white;
    }
    span.a{
      display: inline; /*默认的span*/
      width: 100px;
      height: 100px;
      padding: 5px;
      border: 1px solid blue;
      background-color: yellow;
    }
    span.b{
      display: inline-block;
      width: 100px;
      height: 100px;
      padding: 5px;
      border: 1px solid blue;
      background-color: yellow;
    }
    span.c {
      display: block;
      width: 100px;
      height: 100px;
      padding: 5px;
      border: 1px solid blue;
      background-color: yellow;
    }
    .houChoices p{
      background-color: yellow;
    }
    /* unvisited link */
    a:link {
      color: red;
    }

    /* visited link */
    a:visited {
      color: green;
    }

    /* mouse over link */
    a:hover {
      color: hotpink;
    }

    /* selected link */
    a:active {
      color: blue;
    }
    .titleH:before{
      content: url("/img/eg_dragdrop_w3school.gif");
    }
    /*.img1{*/
    /*  opacity: 0.5;*/
    /*}*/
    .img1:hover{
      opacity: 0.5;
    }

    .tm{
      background: rgb(76,175,80);
      padding: 10px;
    }
    div.first{
      background: rgba(76,175,80,0.1);
    }
    div.second{
      background: rgba(76,175,80,0.3);
    }
    div.third{
      background: rgba(76,175,80,0.6);
    }
  </style>
  <!--
  css布局 display属性
  display 属性是用于控制布局的最重要的css属性
  display 属性规定是否/如何显示元素
  每个html 元素都有一个默认的display值 取决于它的元素类型 大多数元素的默认 display值 为 block 或inline

  块级元素
  块级元素总是从新行开始 并占据可用的全部宽度
  块级元素
    div
    h1-h6
    p
    form
    header
    footer
    section

  行内元素
    内联元素不从新行开始 仅占用所需的宽度
     行内 元素
     span
     a
     img

  Display none
    通常与js 一起使用 以隐藏和显示元素 而无需删除和重新创建它们
    默认情况下 script 元素使用 display : none;
    display 指定应如何显示元素
    visibility 指定元素是否应该可见

  面板包含一个div 元素 默认情况下该元素是隐藏的 display:none
  使用css进行样式设置 使用js 来进行显示它 display:block
  p 元素的 具有 onclick属性 当点击p元素时 执行myFunction() 函数
  函数 将 id 为panel的div 样式 从 display:none  隐藏 改为 display:block 可见

  Ruff 的使用
  安装
    pip install ruff
  复制代码
    ruff check . #分析当前及子目录内的所有文件
    ruff check path/to/code/  #分析指定目录及子目录内的所有文件
    ruff check path/to/code/*.py  #分析指定目录内的所有py文件
    ruff check path/to/code/to/file.py  #分析 file.py

  预提交的钩子
  python
    -repo https://github.com/charliermarsh/ruff-pre-commit
    # Ruff version
    rev: 'v0.0.261'
    hooks:
      -id: ruff

  通过 pyProject.toml , ruff.toml 或 .ruff.toml 文件进行配置
  css 布局 position 属性
  position 属性规定用于元素定位的方法的类型
  有5个不同位置值
    static
    relative
    fixed
    absolute
    sticky
    元素其实是使用top bottom left right属性定位

    position : static  静态定位的元素不受 top bottom left 和right影响
    position: relative;
    position: relative; 的元素相对于其正常位置进行定位。
    position: fixed;
    position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
    position: absolute;
    position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
    position: sticky;
    position: sticky; 的元素根据用户的滚动位置进行定位。


  css overflow 属性控制太大而区域无法容纳的内容的处理方式
  CSS Overflow
  overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

  overflow 属性可设置以下值：

  visible - 默认。溢出没有被剪裁。内容在元素框外渲染
  hidden - 溢出被剪裁，其余内容将不可见
  scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
  auto - 与 scroll 类似，但仅在必要时添加滚动条
  注释：overflow 属性仅适用于具有指定高度的块元素。
  overflow -x 和 overflow-y 属性规定是仅水平还是垂直地更改内容的溢出
  overflow-x 指定如何处理内容的左右边缘
  overflow-y 指定如何处理内容的上下边缘

  css float 属性规定元素如何浮动
  css clear 属性规定那些元素可以在清除的元素旁边以及在哪一侧浮动
  float 属性
  float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

  float 属性可以设置以下值之一：

  left - 元素浮动到其容器的左侧
  right - 元素浮动在其容器的右侧
  none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
  inherit - 元素继承其父级的 float 值
  最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。
  clear 属性
  clear 属性
  clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

  clear 属性可设置以下值之一：

  none - 允许两侧都有浮动元素。默认值
  left - 左侧不允许浮动元素
  right- 右侧不允许浮动元素
  both - 左侧或右侧均不允许浮动元素
  inherit - 元素继承其父级的 clear 值
  使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

  在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。

  下例将清除向左的浮动。表示在（div 的）左侧不允许出现浮动元素：
  浮动实例
  使用 float属性 可以轻松并排浮动内容框

  box-sizing 您可以轻松创建3个浮动框 .但是（例如，内边距或边框）时，这个框会损坏。 box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。
   这种框格（The grid of boxes）也可以用来并排显示图像：

实例
.img-container {
  float: left;
  width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
  padding: 5px; /* 如果需要在图片间增加间距 */
}

等宽的框
在上例中，您学习了如何以相等的宽度并排浮动框。但是，创建具有相同高度的浮动框并不容易。不过，快速解决方案是设置一个固定的高度，如下例所示：
.box {
  height: 500px;
}


display: inline-block
与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。

与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

下例展示 display: inline、display: inline-block 以及 display: block 的不同行为：

inline-block 用于水平而不是垂直地显示列表项

元素居中
居中对齐元素 要使元素 div 水平居中 请使用 margin: auto
设置元素的宽度将防止其延伸到容器的边缘 ,然后元素将占用指定的宽度 剩余空间将在两个外边距之间平均分配
注意 如果未设置width 属性 或将其设置为100% 则居中对齐无效
.center{
  margin: auto;
  width: 50%
  border: 3px solid green;
  padding: 20px;
}

居中对齐文本
如果仅需在元素内居中文本 请使用 text-align:center;
.center{
  text-align: center;
  border:3px solid green;
}

居中对齐图像
如需居中图像，请将左右外边距设置为 auto，并将其设置为块元素：
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

左和右对齐 - 使用 position
对齐元素的一种方法是使用 position: absolute; :
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

左和右对齐 - 使用 float
对齐元素的另一种方法是使用 float 属性：
.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

垂直对齐 - 使用 padding
有很多方法可以在 CSS 中垂直对齐元素。一个简单的解决方案是使用上下内边距：
.center {
  padding: 70px 0;
  border: 3px solid green;
}

css组合器
  组合器时解释选择器之间关系的某种机制
  css选择器可以包含多个简单选择器 在简单选择器之间我们可以包含一个组合器
  css中有4种不同的组合器
  后代选择器 空格
    后代选择器匹配属于指定元素后代的所有元素
    选择 <div> 元素内的所有 <p> 元素。
  子选择器 >
    div > p {background-color:yellow}
    选择其父元素是 <div> 元素的所有 <p> 元素。
  相邻兄弟选择器 +
    相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素
    div + p {background-color:yellow}
    选择所有紧随 <div> 元素之后的 <p> 元素。
  通用兄弟选择器 ~
      div ~ p {
    background-color: yellow;
  }
    选择前面有 <p> 元素的每个 <ul> 元素。


伪类 是用于定义元素的特殊状态
  可以用于 设置鼠标悬停在元素上时的样式
  为已访问和未访问链接设置不同的样式
  设置元素获得焦点时的样式
  语法 :
  select: pseudo-class{property: value}
  锚伪类
  链接 能够以不同的方式显示
  /* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}


注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

css 伪元素 用于设置元素指定部分的样式
  伪元素的语法：

selector::pseudo-element {
  property: value;
}
::first-line 伪元素
::first-line 伪元素用于向文本的首行添加特殊样式。

下面的例子为所有 <p> 元素中的首行添加样式：

实例
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
请注意双冒号表示法 - ::first-line 对比 :first-line

::first-letter 伪元素
::first-letter 伪元素用于向文本的首字母添加特殊样式。

下面的例子设置所有 <p> 元素中文本的首字母格式：

实例
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
CSS - ::before 伪元素
::before 伪元素可用于在元素内容之前插入一些内容。

下面的例子在每个 <h1> 元素的内容之前插入一幅图像：

实例
h1::before {
  content: url(smiley.gif);
}

所有css 伪元素
选择器   例子    例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

css不透明度/透明度
 opacity 属性指定元素的不透明度 通常用于图片
 透明图像 opacity 属性的取值范围为0.0-1.0 值越低 越透明
 img{opacity:0.5}
 opacity 属性常与 :hover 选择器一起使用，改变鼠标悬停时的不透明度：
    .img1{
      opacity: 0.5;
    }
    .img1:hover{
      opacity: 1.0;
    }

  -->
</head>
<body>
<p class="flip" onclick="myFunction()">点击这里来显示面板</p>
<div id="panel">
  <p>该面板包含一个 div 元素，默认情况下该元素是隐藏的（display: none）。</p>
  <p>它使用 CSS 进行样式设置，我们使用 JavaScript 来显示它（display: block）。</p>
  <p>工作原理：请注意，带有 class="flip" 的 p 元素有 onclick 属性。当用户单击 p 元素时，将执行一个名为 myFunction() 的函数，该函数将
    id="panel" 的 div 样式从 display:none（隐藏）更改为 display:block（可见）。</p>
  <p>您将在我们的 JavaScript 教程中学到有关 JavaScript 的更多知识。</p>
</div>
<div id="yc" style="width:200px;height: 50px;background-color: #eeeeee;overflow: auto">
  一次ID就哦is等级哦设计哦叫哦ii叫哦i几,大家撒降低搜啊大家死哦大祭司哦冬季,四第三等级搜到叫哦四代机哦,<br>
  一次ID就哦is等级哦设计哦叫哦ii叫哦i几,大家撒降低搜啊大家死哦大祭司哦冬季,四第三等级搜到叫哦四代机哦,<br>
  一次ID就哦is等级哦设计哦叫哦ii叫哦i几,大家撒降低搜啊大家死哦大祭司哦冬季,四第三等级搜到叫哦四代机哦,<br>
  一次ID就哦is等级哦设计哦叫哦ii叫哦i几,大家撒降低搜啊大家死哦大祭司哦冬季,四第三等级搜到叫哦四代机哦,<br>
  一次ID就哦is等级哦设计哦叫哦ii叫哦i几,大家撒降低搜啊大家死哦大祭司哦冬季,四第三等级搜到叫哦四代机哦,<br>
</div>
<div id="fd">
  <img src="/img/eg_dragdrop_w3school.gif" alt="gif" style="float: right;clear: left">
</div>
<h1>网格框</h1>
<p>并排浮动的框: </p>
<div class="clearfix">
  <div class="box" style="background-color: #bbbbbb">
    <p>框中的一些文本.</p>
  </div>
  <div class="box" style="background-color: #cccccc">
    <p>框中的一些文本.</p>
  </div>
  <div class="box" style="background-color: #dddddd">
    <p>框中的一些文本.</p>
  </div>
</div>
<p>请注意，我们还用了 clearfix hack 来处理布局流，并添加了 box-sizing
  属性，以确保框不会由于额外的内边距（填充）而损坏。尝试删除此代码以查看效果。</p>
<h2>使用浮动创建带有水平导航栏 页眉 页脚 左侧导航栏和主要内容的首页</h2>
<ul class="topMenu">
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<div class="clearfix">
  <div class="column sideMenu">
    <ul>
      <li><a href="#flight">The Flight</a></li>
      <li><a href="#city" class="active">The City</a></li>
      <li><a href="#island">The Island</a></li>
      <li><a href="#food">The Food</a></li>
      <li><a href="#people">The People</a></li>
      <li><a href="#history">The History</a></li>
      <li><a href="#oceans">The Oceans</a></li>
    </ul>
  </div>
  <div class="column content">
    <div class="header">
      <h1>The City</h1>
    </div>
    <h1>Shanghai</h1>
    <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
    </p>
    <p>You will learn more about responsive web pages in a later chapter.</p>
  </div>
  <div class="footer">
    <p>Footer Text</p>
  </div>
</div>
<div class="bj">
  <h1>display 属性</h1>
  <h2>display: inline</h2>
  <div>
    Shanghai is one of the four direct-administered municipalities of
    <span class="a">the People's Republic of China</span>.Welcome to <span class="a">Shanghai</span>!
  </div>
  <h2>display: inline-block</h2>
  <div>Shanghai is one of the four direct-administered municipalities of
    <span class="b">the People's Republic of China</span>.Welcome to <span class="b">Shanghai</span>!
  </div>
  <h2>display: block</h2>
  <div>Shanghai is one of the four direct-administered municipalities of
    <span class="c">the People's Republic of China</span>.Welcome to <span class="c">Shanghai</span>!</div>
</div>
<div>
    <h1>后代选择器</h1>
    <p>后代选择器匹配作为指定元素后代的所有元素.</p>
    <div class="houChoices">
      <p>div 中段落1.</p>
      <p>div 中段落2.</p>
      <section><p>div 中的段落 3</p></section>
    </div>
    <p>段落4 不在div中 </p>
    <p>段落5 不在div中 </p>
</div>
<div class="wei">
  <h1>css 链接</h1>
  <p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
  <p><b>注释:</b>在css定义中,a:hover必须位于 a:link和 a:visited 之后才能生效</p>
  <p><b>注释:</b>在css定义中,a:active必须位于 a:hover 之后才能生效</p>
</div>
<div>
  <h1 class="titleH">这是一个标题</h1>
  <p>::before 伪元素在一个元素的内容之前插入内容。</p>
  <h1 class="titleH">这是一个标题</h1>
</div>
<div>
  <h1>图像透明度</h1>
  <p>opacity 属性常与 :hover 选择器一起使用，改变鼠标悬停时的不透明度：</p>
  <img class="img1" src="/img/girl_gesture_shorts_1066017_300x168.jpg" alt="Tulip" width="170" height="170">
  <img class="img1" src="/img/girl_hair_pink_1108892_1920x1080.jpg" alt="Tulip" width="170" height="170">
  <img class="img1" src="/img/girl_flower_dress_1066910_1920x1080.jpg" alt="Flower" width="170" height="170">
</div>
<div class="tm">
  <h1>透明框</h1>
  <p>使用opacity: </p>
  <div style="opacity: 0.1;"><p>10% opacity</p></div>
  <div style="opacity: 0.3;"><p>30% opacity</p></div>
  <div style="opacity: 0.6;"><p>60% opacity</p></div>
  <div><p>opacity 1</p></div>
  <p>使用 RGBA 颜色值: </p>
  <div class="first"><p>10% opacity</p></div>
  <div class="second"><p>30% opacity</p></div>
  <div class="third"><p>60% opacity</p></div>
  <div><p>default</p></div>
  <p>注意使用 opacity 属性时文本以及背景颜色如何变的透明</p>
</div>
<script>
  function myFunction() {
    document.getElementById("panel").style.display = "block"
  }
</script>
</body>
</html>
